@inject IStringLocalizer<SharedResource> L

<MudDrawer Anchor="LayoutService.IsRTL?Anchor.Left:Anchor.Right"
           @bind-Open="ThemingDrawerOpen"
           Elevation="1"
           Variant="@DrawerVariant.Temporary"
           Width="260px">
    <MudDrawerHeader Class="align-center">
        <MudText Typo="Typo.body1">
            <b>@L["Themes"]</b>
        </MudText>
        <MudSpacer />
        <MudIconButton Color="Color.Default"
                       Icon="@Icons.Material.Filled.Close"
                       OnClick="@(() => ThemingDrawerOpenChanged.InvokeAsync(false))"
                       Size="Size.Small" />
    </MudDrawerHeader>
    <MudDivider />
    <div class="ma-6">
        <MudText Typo="Typo.body2">
            <b>@L["Mode"]</b>
        </MudText>
        <MudGrid Class="my-3"
                 Spacing="3">
            <MudItem xs="6">
                <MudButton Class="mode-button"
                           FullWidth="true"
                           OnClick="@(() => ToggleDarkLightMode(false))"
                           Style="background: white;">
                    <ChildContent>
                        <MudIcon Color="Color.Primary"
                                 Icon="@Icons.Material.Filled.WbSunny" />
                    </ChildContent>
                </MudButton>
            </MudItem>
            <MudItem xs="6">
                <MudButton Class="mode-button"
                           FullWidth="true"
                           OnClick="@(() => ToggleDarkLightMode(true))"
                           Style="background: #333333;">
                    <ChildContent>
                        <MudIcon Icon="@Icons.Material.Filled.DarkMode"
                                 Style="color: #c9c9c9" />
                    </ChildContent>
                </MudButton>
            </MudItem>
        </MudGrid>

        <MudText Typo="Typo.body2">
            <b>@L["Color"]</b>
        </MudText>
        <MudGrid Class="my-3"
                 Spacing="3">
            @foreach (var color in _primaryColors)
            {
                <MudItem xs="4">
                    <MudButton Class="@(color == UserPreferences.PrimaryColor ? "color-button color-button-selected" : "color-button")"
                           FullWidth="true"
                           OnClick="@(() => UpdateThemePrimaryColor(color))">
                        <ChildContent>
                            <div class="@(color == UserPreferences.PrimaryColor ? "oval oval-selected" : "oval")"
                             style="@($"background: {color};")">
                            </div>
                        </ChildContent>
                    </MudButton>
                </MudItem>
            }
        </MudGrid>
        <MudText Typo="Typo.body2">
            <b>Border Radius</b>
        </MudText>
        <MudGrid Class="my-3"
                 Spacing="3">

            <MudItem xs="12">
                <MudSlider Value="@UserPreferences.BorderRadius" Min="0" Max="@MaxValue" Immediate="false" Step="1" Color="Color.Primary"
                           @oninput="@((e) => ChangedSelection(e))">
                    @UserPreferences.BorderRadius.ToString()
                </MudSlider>
            </MudItem>

        </MudGrid>
    </div>
</MudDrawer>

<MudOverlay DarkBackground="false"
            OnClick="@(() => ThemingDrawerOpenChanged.InvokeAsync(false))"
            Visible="ThemingDrawerOpen"
            VisibleChanged="ThemingDrawerOpenChanged" />


<style>

    .mode-button {
        border: 1px solid var(--mud-palette-table-lines);
        height: 90px;
    }

    .oval {
        width: 25px;
        height: 15px;
        border-radius: 50%;
        transform: rotate(120deg);
    }

    .oval-selected {
        transform: rotate(0deg);
    }

    .color-button {
        height: 50px;
        border: 1px solid var(--mud-palette-table-lines);
    }

    .color-button-selected {
        border: 2px solid var(--mud-palette-primary);
    }
</style>
